<template>
  <div>
    <router-link :to="item" class="tabs-view" v-for="(item,i) of tags" :key="i">
      <el-tag
        closable
        @close.prevent="handleClose(item)"
        :class="[item==$route.path?'active_color':'']"
      >{{ item | filterPath}}</el-tag>
    </router-link>
  </div>
</template>

<script>
import { mapState } from "vuex";
export default {
  name: "tags",
  data() {
    return {};
  },
  computed: {
    ...mapState(["tags"])
  },
  methods: {
    handleClose(path) {
      //移除标签
      if (this.$route.path === path) {
        //如果删除的标签和当前页面的相同就返回上一个页面
        this.$router.back();
      }
      this.$store.commit("removeTags", path);
    }
  },
  filters: {
    filterPath: function(value) {
      switch (value) {
        case "/users":
          value = "用户列表";
          break;
        case "/roles":
          value = "角色列表";
          break;
        case "/rights":
          value = "权限列表";
          break;
        case "/params":
          value = "分类参数";
          break;
        case "/goods":
          value = "商品列表";
          break;
        case "/categories":
          value = "商品分类";
          break;
        case "/orders":
          value = "订单列表";
          break;
        case "/reports":
          value = "数据报表";
          break;
        default:
          value;
      }
      return value;
    }
  }
};
</script>

<style lang='stylus' scoped>
.tabs-view {
  margin: 5px;
}

.active_color {
  background-color: #E6A23C;
  color #fff
}
</style>